<template>
  <div class="content">
    <dt-header :line-number="2" :title="detailsData.bonusName" :label-width='120' ref='header'>
      <div>
        <div class="btn" v-if="flag=='audit'">
          <Button type="primary" @click="onAudit">审批</Button>
        </div>
        <div class="btn" v-else>
          <Button type="primary" @click='infoOpen'>流程信息</Button>
          <Button type="primary" @click='onExport'>导出</Button>
        </div>
      </div>
    </dt-header>
    
    <div class="qie">
      <Tabs :value="tabVal" type="card" @on-click="tabValChange">
        <TabPane label="房源明细" name="1">
        </TabPane>
        <TabPane label="人员汇总" name="2">
        </TabPane>
      </Tabs>
      <dt-grid ref="table" :columns="columns" :list="list" />
    </div>
    
    <info-modal ref="infoModal"></info-modal>
    <audit-modal ref="audit" />
  </div>
</template>
<script>
import infoModal from './components/infoModal.vue'
import auditModal from '@/components/biz/audit/audit-modal.vue'
import columnOpt from './opt/incentiveSeeColumn'
import HeaderOpt from './opt/HeaderOpt.js'
import incentiveMgr from '@/biz/bonus/incentive'
import toolApi from '@/biz/base/tool'
import billMgr from '@/biz/bonus/bill'

export default {
  components: {
    infoModal,
    auditModal,
  },
  data() {
    return {
      detailsData: {},
      columns: [],
      list: [],
      tabVal: '1',
      flag: this.$route.query.flag,
    }
  },
  mounted() {
    this.getDetails()
    this.columns = columnOpt.options1(this)
    this.$refs.table.init(this)
  },
  methods: {
    onAudit() {
      billMgr.isCanApproveBonus(this.$route.query.housesId).then(res => {
        this.$refs.audit.show({
          auditId: this.$route.query.auditId,
          businessId: this.$route.query.businessId,
          auditType: 4,
        })
      })
    },
    getDetails() {
      let params = {
        headerId: this.$route.query.headerId,
      }
      incentiveMgr.selectBonusStimulateInfo(params).then((res) => {
        this.detailsData = res
        this.$refs.header.init(new HeaderOpt(this.detailsData), this.detailsData)
        if (this.tabVal == 1) {
          this.columns = columnOpt.options1(this)
          this.list = this.detailsData.boStimulateDetailInfoList
        } else {
          this.columns = columnOpt.options2(this)
          this.list = this.detailsData.userStimulateDetailInfos
        }
      })
    },
    tabValChange(val) {
      if (val == 1) {
        this.columns = columnOpt.options1(this)
        this.list = this.detailsData.boStimulateDetailInfoList
      } else {
        this.columns = columnOpt.options2(this)
        this.list = this.detailsData.userStimulateDetailInfos
      }
    },

    infoOpen() {
      let params = {
        businessId: this.$route.query.headerId,
        auditType: 4,
      }
      this.$refs.infoModal.create(params)
    },
    onExport() {
      let params = {
        headerId: this.$route.query.headerId,
      }
      toolApi.downloadCenter(
        '/dt-order/bonus/stimulate/exportBonusStimulate/[headerId]',
        params,
        'get'
      )
    },
  },
}
</script>

<style lang="scss" scoped>
  .content {
    padding: 20px;
  }
  
  .qie {
    margin-top: 20px;
  }
  
  .btn {
    Button {
      margin-left: 10px;
    }
  }
</style>
